<template>
    <div class="playLists">
        <div>
            <svg width="30px" height="30px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer;"
                @click="hiddenIt">
                <title />
                <g id="Complete">
                    <g id="align-right">
                        <g>
                            <polygon fill="#ffffff" points="19.9 18 11.1 18 11.1 18 19.9 18 19.9 18" stroke="#000000"
                                stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />

                            <polygon fill="#ffffff" points="20 14 4 14 4 14 20 14 20 14" stroke="#000000"
                                stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />

                            <polygon fill="#ffffff" points="19.9 10 11.1 10 11.1 10 19.9 10 19.9 10" stroke="#000000"
                                stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />

                            <polygon fill="#ffffff" points="20 6 4 6 4 6 20 6 20 6" stroke="#000000" stroke-linecap="round"
                                stroke-linejoin="round" stroke-width="2" />
                        </g>
                    </g>
                </g>
            </svg>
        </div>
        <div class="time">
            {{ time }}/{{ times(music.audioDuration) }}
        </div>
    </div>
</template>

<script lang="ts" setup>
import { inject, onBeforeUpdate, Ref, ref, watch, onUpdated, computed } from 'vue'
import { musicPlay } from '@/stores/music'
import { transTime, transTimes } from '@/utils/time'

const music = musicPlay()

const times = (data: number) => {
    return transTime(data)
}

let time = ref<string>('00:00')
watch(() => music.audioCurrent, (newValue) => {
    time.value = transTimes(music.audioCurrent)
}, { deep: true, immediate: true })

/* 祖传孙 */
/* 这里需要注意的是 ref 和 Ref 的区别 */
const hidden2 = inject<Ref<Boolean>>('hidden2')
const hidden = ref(hidden2)

/* 孙传祖 */
const { setMsg } = inject<any>('handle')
const hiddenIt = () => {
    setMsg(!hidden.value)
}

</script>

<style lang="scss" scoped>
.playLists {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    overflow-x: hidden;

    .time {
        margin-right: 20px;
    }
}
</style>



